<script>
export default {
  props: ['tableList', 'fetchTableData'],
  watch: {
    tableList(n) {
      if (n) {
        this.parentTable = n
      }
    }
  },
  data() {
    return {
      param: {
        content: {
          keyword: null
        }
      },
      parentTable: {
        item: null,
        hidden: false
      },
      detailOrAdd: {
        template: {
          nameInfo: {shortName: {'zh-CN': ''},fullName: {'zh-CN': ''}},
          satelliteLocation: {lng: '',lat: '',area: '', zoom: 18}
        },
        data: {
          nameInfo: {shortName: {'zh-CN': ''},fullName: {'zh-CN': ''}},
          satelliteLocation: {lng: '',lat: '',area: '', zoom: 18}
        }
      },
      buildingList: {
        data: [],
        map: {}
      }
    }
  },
  mounted() {
    this.fetchBaseData()
    this.parentTable = this.tableList
    if (this.parentTable.item) {
      this.detailOrAdd.data = this.parentTable.item
    }else {
      this.detailOrAdd.data = this.detailOrAdd.template
    }
  },
  methods: {
    formCancel: function () {
      this.parentTable.hidden = false
      this.fetchTableData()
    },
    fetchBaseData: function () {
      this.$axios({url:'/ems/client/base/building/list',data: this.param}).then((content) => {
        const list = content.list;
        const buildingMap = this.buildingList.map
        list.forEach(function (item) {
          if (item.nameInfo) {
            item.nameInfo = JSON.parse(item.nameInfo)
          }
          buildingMap['' + item.id + ''] = item
        })
        this.buildingList.data = list
      });
    },
    formSubmit: function () {
      this.$refs.form.validate((valid) => {
        if(valid) {
          this.saveOrUpdate(this.detailOrAdd.data)
        }else {
          return false
        }
      })
    },
    saveOrUpdate: function (data) {
      const param = {}
      for (let k in data) {
        const v = data[k]
        if (v instanceof Object) {
          param[k] = JSON.stringify(v)
        }else {
          param[k] = v
        }
      }
      param.instituteId = this.buildingList.map['' + param.buildingId + ''].instituteId
      this.$axios({url:'/ems/client/base/gateway/update',data: {content: param}}).then((content) => {
        if (content) {
          this.$message("保存成功")
          this.formCancel()
        }
      });
    }
  }
}
</script>

<template>
  <el-form ref="form" :model="detailOrAdd.data" label-width="150px">
    <el-row  style="margin-top: 20px;">
      <el-col :span="8">
        <el-form-item label="ID">
          <el-input v-model="detailOrAdd.data.id" style="width: 250px;" disabled></el-input>
        </el-form-item>
        <el-form-item prop="buildingId" label="所属建筑" :rules="[{ required: true, message: '不能为空'}]">
          <el-select v-model="detailOrAdd.data.buildingId" placeholder="请选择所属建筑">
            <el-option v-for="item in buildingList.data" :key="item.id" :label="item.nameInfo.shortName['zh-CN']" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="name" label="采集器名称" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.name" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="code" label="采集器编码" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.code" style="width: 250px;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="采集器经度" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.satelliteLocation.lng" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="采集器纬度" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.satelliteLocation.lat" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="经纬度范围" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.satelliteLocation.area" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="地图可见级别" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.satelliteLocation.zoom" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="说明" label-width="150px">
          <label style="color: gray">经纬度获取方式：<br>https://lbs.amap.com/demo/javascript-api-v2/example/overlayers/overlay-draw</label>
        </el-form-item>
        <el-form-item label="采集器地址" label-width="150px">
          <el-input v-model="detailOrAdd.data.address" style="width: 250px;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="备注" label-width="150px">
          <el-input v-model="detailOrAdd.data.remark" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="扩展信息（报表可用）" label-width="150px">
          <el-input v-model="detailOrAdd.data.ext" style="width: 250px;"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" @click="formSubmit">提交</el-button>
      <el-button @click="formCancel">取消</el-button>
    </el-row>
  </el-form>
</template>

<style>

</style>
